Sketch to CSS
學習來源
使用工具
編譯器初始化設定(Pen Settings)
step1.CSS設定為SCSS
step2.載入icon服務
可以手動直接將下方CDN貼到基本設定欄位中。或是透過畫面中內建的搜尋功能，搜尋：Font-Awesome，CDN將自動被加入欄位中。
1
| https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
|
step3.設定完成(Save&Close)
正式開始切版
切版呈現目標
呈現目標
背景色設定
step1.(SCSS語法)將顏色命名為一個變數
1
2
| $bg-color1: #FCF4ED;
$bg-color2: #F0C7B2;
|
step2.設計漸層背景
1
2
3
4
5
| body{
height:100vh;
background-image:linear-gradient(175deg,$bg-color1,$bg-color1 50%,$bg-color2 50%)
}
|
中間卡片基本設定
step1.先在html中給他一個命名，名為card
1
| <div class="card"></div>
|
step2.在css中定義card的基本樣式
1
2
3
4
5
6
| .card{
background-color:#fff;
padding:15px;
height:60vh;
width:600px;
}
|
step3.加入：box-sizing屬性
==當你設定一個元素樣式為 box-sizing: border-box;，這個元素的內距和邊框將不會增加元素本身的寬度。==
1
2
3
| .card{
box-sizing:border-box;
}
|
或者可以用*{}，代表對所有元素統一做設定
1
2
3
| *{
box-sizing:border-box;;
}
|
step4.為card添加陰影
1
| $card-box-shadow: 0 4px 30px #979797;
|
1
2
3
| .card{
box-shadow:$card-box-shadow;
}
|
step5.如何讓card置中整個畫面呢？在body中加入對齊的設定！
1
2
3
4
5
| body{
display:flex;
justify-content:center;
align-items:center;
}
|
卡片內圖片
step1.先在html中給予一個畫面空間
1
2
3
4
| <div class="card">
<div class="brand-bg"></div><!--新增這個div作為圖片空間 -->
<h1>About JENDES</h1>
</div>
|
step2.先將父元素card定位
1
2
3
| .card{
position:relative;
}
|
step3.再將子元素brand-bg(遮色片)定位
1
2
3
4
5
6
7
8
| .brand-bg{
position:absolute;
left:0;
top:0;
bottom:0;
width:445px;
}
|
step4.載入圖片url，並相較於遮色片做定位
1
2
3
4
5
| .brand-bg{
background-image:url(https://images.unsplash.com/photo-1550939810-cb345b2f4ad7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2632&q=80);
background-size:527px 633px;
background-position:-41px -10px;
}
|
step5.遮色片作梯形切割
1
2
3
4
| .brand-bg{
clip-path:polygon(0 0, 339.05px 0,445px 100%,0% 100%);
}
|
卡片內文字
step1.先在html中給文字一個區塊畫面
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <div class="card">
<div class="brand-bg"></div>
<div class="card-block">
<div class="card-header">
<h1>About JENDES</h1>
</div>
<div class="card-body">
<p>粉橘色，一個溫柔又有個性的顏色。
<br/>柔和色相的背後蘊含著明亮活潑的橘彩，卻同時調入了冷靜灰階。
<br/>有如生活中的我們，一人扮演著多種角色，每個角色充滿著層次、彈性，無法輕易僅以黑白雙色定義。
</p>
<p>讓每道顏色都能在這找到適合的穿著，舒服展現每一個自己。
<br/>由裡到外，穿出自信自在。
</p>
<p>When style shines from inside, no one can define you.
<br/>You are just who you are.
</p>
</div>
<div class="card-footer">
<a href="#" class="btn">＋電子報訂閱</a>
</div>
</div>
|
==p標籤代表文字段落==
==br標籤代表斷行==
step2.定位文字區塊相較於card的位置
1
2
3
4
5
6
7
8
9
10
11
| .card-block{
width:318px;
position:relative;
x-index:3;
display:flex;
flex-direction:column;
}
|
==flex跟position是可以一起使用的，兩個沒有關係;float跟display也沒有關係;flex裡面可以再有flex==
step3.設定card-footer定位在區塊的最下方
1
2
3
4
| .card-footer{
margin-top:auto;
}
|
step4.設定btn樣式
1
2
3
4
5
6
7
8
9
10
11
12
| $btn-color:#D8D8D8;
.btn{
background-color:$btn-color;
color:#000000;
width:292px;
padding-top:0.5rem;
padding-bottom:0.5rem;
display:block;/*設定區塊元素 */
text-decoration:none;
text-align:center;
}
|
==display:block - 區塊元素，元素會以區塊方式呈現。一個區塊元素會讓其內容從新的一行開始顯示，並盡可能的撐滿容器。==
==display:inline - 行內元素，所有文字或圖片均不換行，也就是全部都會是同一行的意思。==
step5.設定btn的動態hover樣式變化
1
2
3
4
5
6
| .btn{
background-color:$btn-color;
&:hover,&:focus{
background-color:darken($btn-color,15%);
}
}
|
step6.設定內文字體
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| h1{
font-size:32px;
font-weight:bolder;
}
.card-header{
color:#AD5E36;
font-family:cursive;
font-weight:bold;
}
p{
font-size:16px;
margin-top:16px;
line-height: 20px;
}
.card-body{
font-family:"STXihei","FangSong",cursive;
color:#6D7278;
}
|
參考資料：CSS 常用中文字型 (Traditional Chinese font family)
step7.加上簽名圖片
1
2
3
4
5
6
7
8
| .sign-image{
margin-left:203px;
margin-top:16px;
width:115px;
height:39px;
background-image:url(https://www.jendesstudio.com/front/assets/images/jenwu.png);
background-size:115px 39px;
}
|
結果呈現